<script setup>
import MySon1 from './MySon1.vue';
import MySon2 from './MySon2.vue';
import { ref } from 'vue';

let house = ref(10)

let son1 = ref()
function changeSon1Toy() {
  //console.log(son1.value);
  // 父组件通过拿到子组件的实例对象，就可以直接访问子组件的属性和方法(前提是子组件要使用defineExpose({})暴露出来)
  son1.value.toy = '飞机'
}

let son2 = ref()
function changeSon2Computer() {
  son2.value.computer = '暗影精灵5'
}

function getAllSon(refs) {
  for (let key in refs) {
    console.log(key, refs[key]);//son1 Proxy(Object) {toy: RefImpl, book: RefImpl, __v_skip: true}
    refs[key].book += 3
  }
}

// 爸爸希望儿子也能拿到自己的东西
defineExpose({
  house
})
</script>
<template>
  <div class="myfather">
    <h3>我是父组件</h3>
    <p>父亲的房子数量：{{ house }}</p>
    <button @click="house++">增加房子</button>
    <el-button type="primary" @click="changeSon1Toy">点我修改son1的玩具</el-button>
    <el-button @click="changeSon2Computer">点我修改son2的电脑</el-button>
    <el-button type="success" @click="getAllSon($refs)">点我获取所有的子组件实例对象,让所有孩子的书+3本书</el-button>
    <hr />
    <MySon1 ref="son1"></MySon1>
    <MySon2 ref="son2"></MySon2>
  </div>
</template>
<style scoped>
.myfather {
  background-color: #10d294;
  padding: 10px;
  border: 1px solid rgb(176, 31, 123)
}
</style>